<!DOCTYPE html>
{% load static %}
<html>

<head>
    <meta charset="utf-8">
    <title>SDN</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入Element UI组件库样式和JS文件 -->
    <link rel="stylesheet" href="{% static 'css/element-ui.css' %}">
    <link rel="stylesheet" href="{% static 'css/vis-network.min.css' %}">
    <script src="{% static 'js/vue.min.js' %}"></script>
    <script src="{% static 'js/element-ui.js' %}"></script>
    <!-- 引入axios和自定义样式 -->
    <script src="{% static 'js/vis-network.min.js' %}"></script>
    <script src="{% static 'js/axios.min.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>

<body>
    <div id="app">
        <el-container>
            <el-header class="header" style="margin: 4px; ">
                <el-row justify="space-between">
                    <el-col :span="12">
                        <div class="header-title">SDN管理系统</div>
                    </el-col>
                    <el-col :span="12" align="right">
                        <el-dropdown trigger="hover">
                            <span class="avatar-wrapper">
                                <el-image :src="avatarUrl" class="avatar"></el-image>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span class="header-text"></span>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside width="250px" class="nav">
                    <el-menu default-active="2" class="el-menu-vertical-demo menu" router>
                        <el-menu-item index="1"><a href="{% url 'index' %}" class="link">首页</a></el-menu-item>
                        <el-submenu index="2">
                          <template slot="title">网络拓扑管理</template>
                          <el-menu-item index="2-1"><a href="{% url 'link-info' %}" class="link">链路历史数据</a></el-menu-item>
                          <el-menu-item index="2-2"><a href="{% url 'endpoint-list' %}" class="link">终端列表</a></el-menu-item>
                        </el-submenu>
                        <el-menu-item index="3"><a href="{% url 'unusual-traffic' %}" class="link">异常流量</a></el-menu-item>
                        <el-menu-item index="4"><a href="{% url 'flow-table' %}" class="link">流表管理</a></el-menu-item>
                        <el-menu-item index="5"><a href="{% url 'meter-table' %}" class="link">meter表管理</a></el-menu-item>
                        <el-menu-item index="6"><a href="#" class="link">QoS策略</a></el-menu-item>
                      </el-menu>
                      
                </el-aside>
                <el-main >
                    <div>
                        <el-table :data="filteredTableData" border style="width: 100%"
                            header-row-class-name="header-row-class">
                            <el-table-column prop="id" label="序号" width="180"></el-table-column>
                            <el-table-column prop="ip" label="IP地址" width="220"></el-table-column>
                            <el-table-column prop="mac" label="MAC地址" width="220"></el-table-column>
                            <el-table-column prop="switch_dpid" label="ovsID" width="220"></el-table-column>
                            <el-table-column prop="switch_port" label="ovs端口" width="225"></el-table-column>
                        </el-table>
                        <div style="margin-top: 10px; text-align: right;">
                            <el-pagination layout="prev, pager, next" :page-size="15" :total="tableData.length"
                                @current-change="handleCurrentChange">
                            </el-pagination>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>

        <!-- 弹出框组件 -->

    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    avatarUrl: "{% static 'img/img1.png' %}",
                    tableData: [],
                    currentPage: 1,
                    pageSize: 15,
                    dialogVisible: false,
                    form: {
                        id: '',
                        ip: '',
                        mac: '',
                        switch_dpid: '',
                        switch_port: '',
                    }
                }
            },
            computed: {
                filteredTableData() {
                    const start = (this.currentPage - 1) * this.pageSize;
                    return this.tableData.slice(start, start + this.pageSize);
                }
            },
            mounted() {
                axios.get('{% static 'show-data/endpoint-list-data.json' %}').then(response => {
                    let dataStr = JSON.stringify(response.data)
                    let data = JSON.parse(dataStr)
                    this.tableData = data
                    console.log(data)
                }).catch(error => {
                    console.log(error)
                })
            },
            methods: {
                logout() {
                    // 执行退出操作，比如清除本地存储的登录信息等
                    window.location.href = "login.html";
                },

                handleCurrentChange(page) {
                    this.currentPage = page;
                },
            }
        });
    </script>
</body>

</html>